<template>
  <view class="container">

      <u-navbar
          :title="'申报列表'"
          :autoBack="false"
          bgColor="transparent"
          @leftClick="leftClick"
          leftIconColor="#FFFFFF"
          leftIcon="arrow-left-double"
          :safeAreaInsetTop="true"
          rightIconColor="#FFFFFF"
          titleStyle="color:#FFFFFF; font-size: 32rpx; font-weight: 600;"
      >
      </u-navbar>
      <view :style="{flex: 1,overflow: 'auto',height:$store.state.heightContentNoTop}"  class="content">
        <view v-for="(items,index) in query.itemList" style="border-radius: 10rpx;border:1px solid #dddddd;display: flex;flex-direction:column;padding: 20rpx;margin:20rpx;padding-bottom: 20rpx">
          <span style="font-weight: bold;color: #a777e3">{{items.candidate}}
            <span v-if="index===0 && ((items.comment && !getCommentType(items.comment['type'])[0]) || !items.comment)">(当前待审核)</span>
          </span>
          <u-divider></u-divider>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.assigneeName">
            <view>办理人：</view><view>{{items.assigneeName}}</view>
            <view v-if="items.deptName" style="padding: 2rpx 6rpx;border-radius: 6rpx;border: 1px solid #cccccc;margin: 2rpx 10rpx;background-color: #dddddd22">{{items.deptName}}</view>
          </div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.candidate"><span>候选办理：</span><span>{{items.candidate}}</span></div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.createTime"><span>接收时间：</span><span>{{items.createTime}}</span></div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.finishTime"><span>处理时间：</span><span>{{items.finishTime}}</span></div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.duration"><span>耗时：</span><span>{{items.duration}}</span></div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.comment"><span>处理状态：</span>
            <span :style="{backgroundColor:getCommentType(items.comment['type'])[1],border:'2rpx solid #ddd;',borderRadius:'8rpx',padding:'4rpx 14rpx',color:'#fff'}">{{getCommentType(items.comment['type'])[0]}}</span>
          </div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.comment"><span>事件等级：</span>
            <span :style="{backgroundColor:getMsgInfo(index)[1],border:'2rpx solid #ddd;',borderRadius:'8rpx',padding:'4rpx 14rpx',color:'#fff'}">{{getMsgInfo(index)[0]}}</span>
          </div>
          <div style="display: flex;align-items: center;margin: 4rpx" v-if="items.comment"><span>处理意见：</span><span>{{items.comment['comment']}}</span></div>
        </view>
      </view>

  </view>
</template>

<script>
import Tabbar from "../../tabbar.vue";
import UButton from "../../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import UListItem from "../../../../uni_modules/uview-ui/components/u-list-item/u-list-item.vue";
import ULoadingPage from "../../../../uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue";
import UAvatar from "../../../../uni_modules/uview-ui/components/u-avatar/u-avatar.vue";
import UDivider from "../../../../uni_modules/uview-ui/components/u-divider/u-divider.vue";

export default {
  components: {UDivider, UAvatar, ULoadingPage, UListItem, UButton, Tabbar},
  props:{
    query:{}
  },
  data() {
    return {
      levels:[]
    }
  },
  methods: {
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      this.params.pageNum++
      this.getList()
    },
    itemList(){
      return this.query.itemList
    },
    leftClick(){
      this.$root.$emit('getEmitter','/pages/exam/applyList')
    },
    getCommentType(type){
      if (type==1) return ['审核通过','green']
      if (type==2) return ['审核通过','']
      if (type==3) return ['驳回','red']
    },
    getMsgInfo(index){
      if (!this.levels[index]){
        this.levels[index] = Math.floor((3-0)-Math.random()*3) + 1
      }
      if (this.levels[index]==1) return ['等级1','green']
      if (this.levels[index]==2) return ['等级2','yellow']
      if (this.levels[index]==3) return ['等级3','red']
    }
  },
  created() {
  },
  activated() {
  },
}
</script>

<style>
::v-deep .u-navbar__content__right__text{
  color: #FFFFFF;
}
::v-deep.u-button--square{
  border-radius: 0;
}
::v-deep .u-navbar--fixed{
  position: relative;
  clear: both;
}
.rotate-90 {
  transform: rotate(90deg);
}
.startWrap{
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}
.start{
  background-color: #3c9cff;
  color: white;
  padding: 5rpx 30rpx;
  margin: 30rpx;
  line-height: 70rpx;
  font-size: 30rpx;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.container {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  height: 100%;
  font-family: 'Poppins', sans-serif;
  padding: 20rpx;
}
.content {
  margin-top: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10rpx;
  margin: 5rpx;
  margin-bottom: 280rpx;
}
::v-deep .u-modal__content {
  justify-content: flex-start;
}
.u-collapse-content{
  padding: 20rpx;
}
</style>
